<template>
  <div>
    <div @contextmenu.stop="" id="bubble" class="bubble">
      <canvas id="bubble-canvas" class="bubble-canvas"></canvas>
    </div>
    <div class="login">
      <div class="login-box">
        <div class="head">
          <img src="@/assets/login-header.png" alt=""/>
        </div>
        <div class="form">
          <img class="profile-avatar" alt="" src="@/assets/jiaozi.jpg"
               style="-webkit-user-select: none;user-select:none"/>
          <div class="content">

            <el-form
                ref="ruleFormRef"
                style="max-width: 600px"
                :model="formData"
                :rules="rules"
                label-width="auto"
                class="demo-ruleForm"
            >
              <el-form-item prop="userName">
                <el-input v-model="formData.userName" clearable="true"/>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="formData.password" type="password" clearable="true" show-password="true"/>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)" class="submit-button">
                  登录
                </el-button>
              </el-form-item>
            </el-form>

          </div>
        </div>
      </div>
    </div>
  </div>


  <el-dialog v-model="saveOrUpdateOpen" title="修改密码" width="800" style="z-index: 999">
    <el-form :model="updatePasswordParam" label-width="auto" style="max-width: 800px"
             ref="updatePasswordRef"
             :rules="userSaveOrUpdateRules"
    >
      <el-form-item label="密码" prop="password">
        <el-input v-model="updatePasswordParam.password" clearable show-password/>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input v-model="updatePasswordParam.confirmPassword" clearable show-password/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="userPassword(updatePasswordRef)">确定</el-button>
        <el-button @click="saveOrUpdateOpen = false">取消</el-button>
      </div>
    </template>

  </el-dialog>

</template>
<script setup lang="ts">
import {reactive, onMounted, onBeforeUnmount, ref} from 'vue'

import {useRouter} from 'vue-router'
import * as pageBubble from '@/utils/pageBubble'
import request from "@/api/request"
import {SET_TOKEN} from '@/utils/token'

import {ElLoading, ElNotification, ElMessage, type FormInstance, type FormRules} from 'element-plus'

const ruleFormRef = ref<FormInstance>()

import {h} from 'vue';
import type {UserSaveOrUpdateParam} from "@/views/sys/user/userInfo";
import {MenuSaveOrUpdateParam} from "@/views/sys/menu/menuInfo";

const updatePasswordRef = ref<FormInstance>()
//添加修改是否可见弹窗
let saveOrUpdateOpen = ref<boolean>(false)

let $router = useRouter()
let timer: number
onMounted(() => {
  timer = window.setTimeout(() => {
    pageBubble.init()
  }, 10)


})

interface updatePassword {
  password: string,
  confirmPassword: string

}

let updatePasswordParam = ref<updatePassword>({
  password: '',
  confirmPassword: ''
});

const validatePassword = (rule, value, callback) => {

  console.log(value)
  console.log(updatePasswordParam.value.password)
  if (value !== updatePasswordParam.value.password) {
    callback(new Error('两次输入的密码不一致'));
  } else {
    callback();
  }

}
const userSaveOrUpdateRules = reactive<FormRules<updatePassword>>({

  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 6, max: 12, message: '密码长度在 6 到 12 个字符', trigger: 'blur'}
  ],
  confirmPassword: [
    {required: true, message: '请确认密码', trigger: 'blur'},
    {validator: validatePassword, trigger: 'blur'}
  ],

});


const userPassword = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {

      const loading = ElLoading.service({
        lock: true,
        text: '正在修改',
        background: 'rgba(0, 0, 0, 0.7)',
      })

      request.put('/sysUser/userPassword', updatePasswordParam.value
      ).then((res) => {
        let rdata = reactive(res);
        if (rdata.code == '10000') {
          loading.close()
          ElNotification.success({
            title: rdata.message,
            message: rdata.time,
            showClose: false,
            duration: 1500
          })
          saveOrUpdateOpen.value = false;
        } else {
          ElMessage.error('操作失败')

        }
      });
    }

  })


}


const formData = reactive({
  userName: 'admin',
  password: '111111'
})

const rules = reactive<FormRules<typeof formData>>({
  userName: [{required: true, message: '请填写用户名', trigger: 'blur'}],
  password: [{required: true, message: '请填写密码', trigger: 'blur'}]
})


const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      onSubmitPre();
    } else {
      console.log('error submit!')
    }
  })
}


//登录按钮
const onSubmitPre = () => {
  const loading = ElLoading.service({
    lock: true,
    text: '登录中',
    background: 'rgba(0, 0, 0, 0.7)',
  })

  request.post('/login', formData
  ).then((res) => {
    loading.close()
    let rdata = reactive(res);
    if (rdata.code == '10000') {

      ElNotification.success({
        title: rdata.message,
        message: rdata.time,
        showClose: false,
        duration: 1500
      })
      SET_TOKEN(rdata.data as string)
      $router.push('/home')
    } else if (rdata.code == '10001') {

      SET_TOKEN(rdata.data as string)
      ElNotification.success({
        title: rdata.message,
        message: rdata.time,
        showClose: false,
        duration: 1500
      })

      saveOrUpdateOpen.value = true;


    } else {
      ElMessage.error(rdata.errorMessage)

    }

  });


}


onBeforeUnmount(() => {
  clearTimeout(timer)
  pageBubble.removeListeners()
})
</script>


<style scoped lang="scss">
.switch-language {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1;
}

.bubble {
  overflow: hidden;
  background: url(@/assets/bg.jpg) repeat;
}

.form-item-icon {
  height: auto;
}

.login {
  position: absolute;
  top: 0;
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;

  .login-box {
    overflow: hidden;
    width: 430px;
    padding: 0;
    background: var(--ba-bg-color-overlay);
    margin-bottom: 80px;
  }

  .head {
    background: #ccccff;

    img {
      display: block;
      width: 430px;
      margin: 0 auto;
      user-select: none;
    }
  }

  .form {
    background: #fdfdfd;
    position: relative;

    .profile-avatar {
      display: block;
      position: absolute;
      height: 100px;
      width: 100px;
      border-radius: 50%;
      border: 4px solid var(--ba-bg-color-overlay);
      top: -50px;
      right: calc(50% - 50px);
      z-index: 2;
      user-select: none;
    }

    .content {
      padding: 100px 40px 40px 40px;
    }

    .submit-button {
      width: 100%;
      letter-spacing: 2px;
      font-weight: 300;
      margin-top: 15px;
      --el-button-bg-color: var(--el-color-primary);
    }
  }
}

@media screen and (max-width: 720px) {
  .login {
    display: flex;
    align-items: center;
    justify-content: center;

    .login-box {
      width: 340px;
      margin-top: 0;
    }
  }
}

.chang-lang :deep(.el-dropdown-menu__item) {
  justify-content: center;
}

.content :deep(.el-input__prefix) {
  display: flex;
  align-items: center;
}

// 暗黑样式
@at-root .dark {
  .bubble {
    background: url(@/assets/bg-dark.jpg) repeat;
  }

  .login {
    .login-box {
      background: #161b22;
    }

    .head {
      img {
        filter: brightness(61%);
      }
    }

    .form {
      .submit-button {
        --el-button-bg-color: var(--el-color-primary-light-5);
        --el-button-border-color: rgba(240, 252, 241, 0.1);
      }
    }
  }
}

@media screen and (max-height: 800px) {
  .login .login-box {
    margin-bottom: 0;
  }
}
</style>